<template>
	<div class="login">
		<div class="login-logo">
			<img src="../assets/img/login-logo.png"/>
		</div>
		<div class="login-title">
			<img src="../assets/img/login-title.png" class="wid50">
		</div>
		<div class="input-group">
			<label class="iconfont icon-unmy"></label>
			<input type="text" placeholder="请输入用户名" v-model="accountVal" />
		</div>
		<div class="input-group">
			<label class="iconfont icon-icon-test4"></label>
			<input type="password" placeholder="请输入密码" v-model="passwordVal" />
		</div>
		<div class="remember">
			<input type="checkbox" @click="rememberChecked" ref="check">
			<span>记住用户名</span>
		</div>
		<div class="loginBox">
			<button class="login-btn" @click="login">登录</button>
		</div>
	</div>
</template>

<script>
	import init from 'assets/js/init';
	import Api from 'assets/js/api';
	import { Toast, Group, XSwitch, XButton } from 'vux'
	var result = localStorage.getItem("result");
	var api = new Api();
	export default {
		name: 'login',
		data() {
			return {
				accountVal: localStorage.getItem('checked'),
				passwordVal: '',
				codeVal: '',
				indexAddress: '',
			}
		},
		created(){
			var self = this;
			var clientId = localStorage.getItem('clientId');
			var result = localStorage.getItem('result');
			console.log(result);
			if(result && result != ""){
				self.$router.push('/index');
			}
		},
		methods: {
			rememberChecked(){
				var self = this;
				if(self.$refs.check.checked){
					localStorage.setItem('checked',self.accountVal);
					console.log(localStorage.getItem('checked'));
				}else if(!self.$refs.check.checked){
					localStorage.removeItem('checked');
				}
			},
			login() {
				localStorage.removeItem("result");//本地存储用户身份字段
				localStorage.removeItem("userRealName");//本地存储用户姓名
				localStorage.removeItem("committee");//本地存储用户居委会
				var self = this;
				if(self.accountVal != '' && self.passwordVal != '') {
					this.$vux.loading.show({
                		text: '登录中...'
            		})
					api.post(api.url.login, {
						'Action': 'Commanage_LOGIN',
						'UserName': self.accountVal,
						'password': self.passwordVal,
						'chkcode': 'app',
						'clientId':clientId
					}).then((response) => {
						this.$vux.loading.hide()
						console.log(response.data.Result)
						if(response.data.ErrorMsg == ""){
							localStorage.setItem("result", response.data.Result);//本地存储用户身份字段
							localStorage.setItem("userRealName",response.data.Result4.UserRealName);//本地存储用户姓名
							localStorage.setItem("committee",response.data.Result2);//本地存储用户居委会
							self.$router.push('/index');
						}else{
							this.$vux.toast.show({
							 text: '账号或密码错误！',
							 type: 'text'
							});
						}
					}).catch((error) => {
					 	this.$vux.loading.hide()
						console.log(error);
						this.$vux.toast.show({
						 text: '账号或密码错误！'
						});
					})
				} else {
					this.$vux.toast.show({
					 text: '输入框不能为空！',
					 type: 'text'
					});
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.login {
		height: 100%;
		box-sizing: border-box;
		border: 1px solid #fff;
		background-color: #fff;
	}
	
	.login-logo {
		width: 3rem;
		height: 3rem;
		margin: 2.5rem auto 0;
		background-color: #e71e1e;
		border-radius: 0.4rem;
	}
	
	.login-logo img{
		max-width: 100%;
		max-height: 100%;
	}
	
	.login-title {
		font-size: 1rem;
		text-align: center;
		color: #e71e1e;
		margin-top: 1rem;
		margin-bottom: 1rem;
		font-weight: 700;
	}
	
	.input-group {
		width: 80%;
		height: 2rem;
		border: 1px solid #e71e1e;
		margin: 0 auto 1.2rem;
		overflow: hidden;
		border-radius: 0.25rem;
		position: relative;
	}
	
	.input-group label {
		display: block;
		float: left;
		width: 15%;
		height: 100%;
		text-align: center;
		line-height: 2rem;
		font-size: 1.1rem;
		color: #e71e1e;
		border-right: 1px solid #e71e1e;
		box-sizing: border-box;
	}
	
	.input-group input {
		width: 85%;
		height: 100%;
		border: 0;
		display: block;
		float: left;
		box-sizing: border-box;
		padding-left: 0.5rem;
		font-size: 0.7rem;
		color: #666;
	}
	
	.input-group .codeImg {
		position: absolute;
		top: 0.2rem;
		right: 0.2rem;
		width: 4rem;
	}
	
	.remember {
		font-size: 0.5rem;
		text-align: left;
		width: 80%;
		margin: 0 auto 1.2rem;
	}
	
	.remember span {
		position: relative;
		top: -0.1rem;
	}
	
	.loginBox {
		text-decoration: none;
		display: block;
	}
	
	.login-btn {
		width: 90%;
		height: 2rem;
		background-color: #f00;
		color: #fff;
		font-size: 0.8rem;
		border: 0;
		border-radius: 0.25rem;
		display: block;
		margin: 0 auto;
	}
</style>